<script setup lang="ts">
import { ref } from 'vue'

const emit = defineEmits(['close'])
const show = ref(false)
defineExpose({
  show,
})

function handleClose() {
//   show.value = false

}
</script>

<template>
  <wd-popup v-model="show" lock-scroll position="bottom" :safe-area-inset-bottom="true" closable custom-style="height: 80%;overflow: hidden;border-radius: 32rpx 32rpx 0 0;" @close="handleClose">
    <view class="wot-form-title pb-60rpx">
      <wd-divider color="#333">
        【 支付订单 > 购币详情 】
      </wd-divider>
    </view>
    <scroll-view class="scroll-view" scroll-y>
      <wd-steps :active="1" vertical dot class="text-left" custom-class="steps">
        <wd-step status="finished">
          <template #title>
            充值下单
          </template>
          <template #description>
            <view class="description">
              <view class="flex-center-row">
                商家编号：
                <wd-tag type="warning">
                  17900055
                </wd-tag>
              </view>
              <view class="flex-center-row">
                支付金额：
                <wd-tag bg-color="#07c160">
                  0.01
                </wd-tag>
                元
              </view>
              <view class="flex-center-row">
                购币数量：
                <wd-tag bg-color="#ffc107">
                  1
                </wd-tag>
                币
              </view>
              <view class="flex-center-row">
                支付方式：微信（LS）
              </view>
              <view>订单编号：<br>WLS817627S17900055D250828104821A</view>
              <view>订单地址：116.23.162.143</view>
              <view class="flex-center-row">
                订单会员：
                <wd-tag type="warning">
                  17900055
                </wd-tag>
              </view>
              <view>下单时间：2025/08/28 10:48:21</view>
            </view>
          </template>
        </wd-step>

        <wd-step status="finished">
          <template #title>
            支付结果
          </template>
          <template #description>
            <view class="description">
              <view class="flex-center-row">
                支付状态：
                <wd-tag bg-color="#07c160">
                  成功
                </wd-tag>
              </view>
              <view class="flex-center-row">
                支付订单：1000251884325240
              </view>
              <view>支付用户：<br>OW_npWSTMKPDStXYHIPGY6NGTP5M</view>
              <view>支付时间：2025/08/28 10:48:21</view>
            </view>
          </template>
        </wd-step>
      </wd-steps>
    </scroll-view>
  </wd-popup>
</template>

<style lang="scss" scoped>
.description {
  font-size: 28rpx;
  color: #333;
  line-height: 50rpx;
  font-weight: normal;
}
.flex-center-row {
  display: flex;
  align-items: center;
}
.scroll-view {
  height: calc(100vh - 400rpx);
  padding-left: 40rpx;
}
.refund {
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  color: #fff;
  background-color: #ed6a0c;
  width: 80%;
  border-radius: 10rpx;
  margin-top: 20rpx;
}
:deep(){
  .wd-tag__text{
    font-size: 24rpx;
  }
}
.steps{
  :deep(){
  .wd-step__line,.wd-step__dot{
      background-color: #07c160 !important;
    }
    .wd-step__title{
      color: #07c160 !important;
      font-weight: bold;
      font-size: 32rpx;
      padding-bottom: 20rpx;
    }
  }

}
</style>
